<template>
	<view style="height:100vh">
		<layout>
			<div class="page-container">
				<!-- Tab Bar -->
				<a-tabs v-model="activeTab" type="card" @change="onTabChange" class="tabs">
					<a-tab-pane key="approved" tab="已审核"></a-tab-pane>
					<a-tab-pane key="pending" tab="申请中">
						<a-button type="primary" icon="plus" @click="openAddDialog" class="add-button">添加申请</a-button>
					</a-tab-pane>
				</a-tabs>

				<!-- 已审核卡片展示 -->
				<div v-if="activeTab === 'approved'">
					<div v-if="approvedData.length === 0" class="no-data">暂无已审核数据</div>
					<a-card v-for="item in approvedData" :key="item.serialNo"
						:title="item.applyType+':'  + item.serialNo" class="card" hoverable>
						<div class="card-content">
							<div class="info-item">
								<span class="info-label">申请时间</span>
								<span class="info-value">{{ item.applyTime }}</span>
							</div>
							<div class="info-item">
								<span class="info-label">申请类型</span>
								<span class="info-value">{{ item.applyType }}</span>
							</div>
							<div class="info-item">
								<span class="info-label">申请人</span>
								<span class="info-value">{{ item.applyUser }}</span>
							</div>
							<div class="info-item">
								<span class="info-label">状态</span>
								<span class="status-tag"
									:class="'status-' + (activeTab === 'approved' ? 'approved' : 'pending')">
									{{ item.applyStatus }}
								</span>
							</div>
						</div>
					</a-card>
				</div>

				<!-- 申请中卡片展示 -->
				<div v-if="activeTab === 'pending'">
					<div v-if="pendingData.length === 0" class="no-data">暂无申请中数据</div>
					<a-card v-for="item in pendingData" :key="item.serialNo" :title="item.applyType+':' + item.serialNo"
						class="card" hoverable>
						<div class="card-content">
							<div class="info-item">
								<span class="info-label">申请时间</span>
								<span class="info-value">{{ item.applyTime }}</span>
							</div>
							<div class="info-item">
								<span class="info-label">申请类型</span>
								<span class="info-value">{{ item.applyType }}</span>
							</div>
							<div class="info-item">
								<span class="info-label">申请人</span>
								<span class="info-value">{{ item.applyUser }}</span>
							</div>
							<div class="info-item">
								<span class="info-label">状态</span>
								<span class="status-tag"
									:class="'status-' + (activeTab === 'approved' ? 'approved' : 'pending')">
									{{ item.applyStatus }}
								</span>
							</div>
						</div>
					</a-card>
				</div>

				<!-- Add Dialog -->
				<a-modal v-model:visible="isAddDialogVisible" title="添加采购申请" @ok="onAddSubmit" @cancel="closeAddDialog"
					width="500px" class="modal-dialog">
					<a-form :form="form" layout="vertical">

						<a-form-item label="申请时间" name="applyTime">
							<el-date-picker clearable v-model="form.applyTime" type="datetime"
								value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择生产日期" >
							</el-date-picker>
						</a-form-item>

						<a-form-item label="申请类型" name="applyType">
							<el-select v-model="form.applyType">
								<el-option v-for="item in ApplyType" :label="item.dictLabel" :value="item.dictValue" />
							</el-select>
						</a-form-item>

						<a-form-item label="申请人" name="applyUser">
							<el-select v-model="form.applyUser">
								<el-option v-for="item in user" :label="item.dictLabel" :value="item.dictValue" />
							</el-select>
						</a-form-item>
					</a-form>

				</a-modal>
			</div>
		</layout>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		listInWarahouseApply4Audit,
		getInWarahouseApply,
		auditInWarahouseApply,
		addInWarahouseApply
	} from "@/api/wmsApply/inWarahouseApply";

	const activeTab = ref('approved'); // 当前激活的Tab
	const isAddDialogVisible = ref(false); // 控制添加对话框的显示
	const form = ref({
		serialNo: '',
		applyTime: '',
		applyType: '',
		applyUser: '',
		applyStatus: ''
	});

	// 已审核和申请中的数据
	const approvedData = ref([]);

	const pendingData = ref([{
		serialNo: 'RKSQ20221113000085',
		applyTime: '2022-11-15 16:14:22',
		applyType: '采购申请',
		applyUser: '李四',
		applyStatus: '申请中'
	}]);
	// 切换Tab时的回调
	const onTabChange = (key) => {
		activeTab.value = key;
	};

	// 打开添加对话框
	const openAddDialog = () => {
		isAddDialogVisible.value = true;
	};

	// 关闭添加对话框
	const closeAddDialog = () => {
		isAddDialogVisible.value = false;
	};

	// 提交添加的数据
	const onAddSubmit = () => {
		closeAddDialog();
		console.log(form.value.applyTime)
		addInWarahouseApply({
			applyTime: form.value.applyTime,
			applyType: form.value.applyType,
			applyUser: form.value.applyUser,
		}).then(ref => {
			// 清空表单
			closeAddDialog();
			getList2();
			form.value = {
				serialNo: '',
				applyTime: '',
				applyType: '',
				applyUser: '',
				applyStatus: ''
			};
		})

	};
	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}
	async function getList1() {
		try {
			const ref = await listInWarahouseApply4Audit({
				pageNum: 1,
				pageSize: 100,
				applyStatus: 2
			});

			console.log(ref);
			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const admin = await getQuery("query_user", item.applyUser); // 等待 getQueryData 完成
				const status = await getDictVaule("apply_status", item.applyStatus); // 等待 getDictVaule 完成
				const type = await getDictVaule("purchase_apply_type", item.applyStatus); // 等待 getDictVaule 完成

				let a = {
					serialNo: item.serialNo,
					applyTime: item.applyTime,
					applyType: type,
					applyUser: admin,
					applyStatus: status
				};

				d.push(a);
			}
			approvedData.value = d;
		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}
	getList1()
	async function getList2() {
		try {
			const ref = await listInWarahouseApply4Audit({
				pageNum: 1,
				pageSize: 100,
				applyStatus: 1
			});

			console.log(ref);
			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const admin = await getQuery("query_user", item.applyUser); // 等待 getQueryData 完成
				const status = await getDictVaule("apply_status", item.applyStatus); // 等待 getDictVaule 完成
				const type = await getDictVaule("purchase_apply_type", item.applyStatus); // 等待 getDictVaule 完成

				let a = {
					serialNo: item.serialNo,
					applyTime: item.applyTime,
					applyType: type,
					applyUser: admin,
					applyStatus: status
				};

				d.push(a);
			}
			pendingData.value = d;
		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}
	getList2();
	const user = ref([]);
	const ApplyType = ref([])
	getQueryData("query_user").then(ref => {
		user.value = ref.data
	})
	getDicts("purchase_apply_type").then(ref => {
		ApplyType.value = ref.data
	})
</script>

<style scoped>
	.page-container {
		padding: 20px;
		background-color: #f8f9fa;
	}

	.tabs {
		margin-bottom: 20px;
	}

	/* 新增网格布局 */
	.card-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 20px;
		padding: 15px;
	}

	.card {
		border-radius: 12px;
		overflow: hidden;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			box-shadow 0.3s ease;
		border: none;
		background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
	}

	.card:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
	}

	/* 卡片头部样式 */
	.card :deep(.ant-card-head) {
		background-color: #f8f9fa;
		border-bottom: 2px solid #e9ecef;
		padding: 16px 24px;
	}

	.card :deep(.ant-card-head-title) {
		font-size: 16px;
		font-weight: 600;
		color: #2c3e50;
		display: flex;
		align-items: center;
	}

	.card :deep(.ant-card-head-title)::before {
		content: '📦';
		margin-right: 8px;
	}

	/* 卡片内容布局 */
	.card-content {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		padding: 16px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 8px;
	}

	.info-label {
		font-size: 12px;
		color: #6c757d;
		margin-bottom: 4px;
	}

	.info-value {
		font-size: 14px;
		color: #495057;
		font-weight: 500;
	}

	/* 状态标签样式 */
	.status-tag {
		display: inline-flex;
		align-items: center;
		padding: 4px 12px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 500;
	}

	.status-pending {
		background-color: #fff3cd;
		color: #856404;
	}

	.status-approved {
		background-color: #d4edda;
		color: #155724;
	}

	/* 新增按钮悬浮效果 */
	.add-button {
		transition: all 0.3s ease;
		box-shadow: 0 4px 6px rgba(74, 144, 226, 0.1);
	}

	.add-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 12px rgba(74, 144, 226, 0.2);
	}

	/* 优化无数据提示 */
	.no-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 20px;
		background-color: white;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.no-data::before {
		content: '😊';
		font-size: 48px;
		margin-bottom: 16px;
	}
</style>